<template>
	<z-paging ref="paging" bgColor="transparent" class="content" :loading-more-enabled="false" hide-empty-view v-model="data" @query="queryList">
		<navigator hover-class="on" url="/pages/goods/address/index?type=select" class="address-box" v-if="data">
			<view class="left">
				<image :src="`/static/icon-address.png`" mode=""></image>
				<view class="text" v-if="address">
					<view class="title">
						<view class="name">{{address.real_name}}</view>
						<view class="tel">{{address.phone}}</view>
					</view>
					<view class="address">
						{{address.province}} {{address.city}} {{address.district}} {{addressdetail}}
					</view>
				</view>
				<view class="address" v-else>
					请选择收货地址
				</view>
			</view>
			<up-icon name="arrow-right" color="#aaa" size="38rpx"></up-icon>
		</navigator>
		<view class="box answer" v-if="data">
			<view class="wen">
				<image :src="`${$imgurl}/static/icon-wen.png`" mode=""></image> {{data.subject_title}}
			</view>
			<view class="dats">
				<view class="p">
					答案：{{data.answer}}
				</view>
			</view>
		</view>
		<view class="box goods-box" v-if="data!=''">
			<view class="title">
				礼品信息
			</view>
			<my-good-info :data="data" />
		</view>
		
		<view class="box it-box" v-if="data!=''">
			<view class="it">
				<view class="msg">订单信息</view>
			</view>
			<view class="it">
				<view class="msg">ID编号</view>
				<view class="val">
					{{data.orderInfo.order_id}}
				</view>
			</view>
			<view class="it">
				<view class="msg">发起时间</view>
				<view class="val">
					{{$u.timeFormat(data.add_time, 'yyyy年mm月dd日 hh:MM:ss')}}
				</view>
			</view>
		
		</view>
		
		<template #bottom>
			<view class="btn-box">
				<view class="it" @click="onAnswer()">
					确认订单
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {orderForOtherInfoApi,orderForMyLogGiftCheckApi} from "@/api/gift.js"

	const data=ref('')
	const id=ref('')
	const paging=ref(null)
	const address=ref('')
	onShow(()=>{
		if(uni.getStorageSync('address')){
			address.value=uni.getStorageSync('address')
			uni.setStorageSync('address',null)
		}
	})
	onLoad(async (obj)=>{
		id.value=obj.id
	})
	const queryList=async (pageNo, pageSize)=>{
		//请求接口数据
		const res=await orderForOtherInfoApi({id:id.value})
		data.value=res.data
		
		paging.value.complete([]);
	}
	//确认订单
	const onAnswer=async ()=>{
		if(address.value=='') return uni.$u.toast('请选择地址！')
		let res=await orderForMyLogGiftCheckApi({
			id:id.value,
			addressId:address.value.id
		})
		uni.$u.toast('确认成功，等待发货！')
		setTimeout(()=>{
			uni.navigateBack()
		},1500)
	}
	

</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
		position: relative;
		
	}
	.content{
		::v-deep{
			// .zp-view-super{
			// 	background-color: #F5F6FA;
			// }
		}
	}
	.answer{
		// position: relative;
		margin-top:20rpx;
		padding:28rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.wen{
			display: flex;
			font-weight: bold;align-items: center;
			image{
				width:36rpx;height:36rpx;margin-right:10rpx;
			}
		}
		.dats{
			background-color: #F5F6FA;
			border-radius: 16rpx;
			padding:24rpx 22rpx;
			margin-top:30rpx;
			min-height: 144rpx;
			box-sizing: border-box;
		}
	}
	.address-box{
		margin-top:20rpx;
		background-color: #fff;
		display: flex;
		padding:32rpx;align-items: center;
		border-radius: 16rpx;
		.left{
			flex:1;
			display: flex;align-items: center;font-size: 28rpx;
			image{width:64rpx;height:64rpx;margin-right:24rpx;}
		}
		.right{
			width:14rpx;height:14rpx;
		}
	}
	.goods-box{
		padding:28rpx;
		background-color: #fff;
		margin-top:20rpx;
		border-radius: 20rpx;
		padding-bottom: 0;
		.title{
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			justify-content: space-between;
			.a{
				display: flex;align-items: center;font-size: 24rpx;
				color:#9BA2AB;
				font-weight: initial;
			}
		}
		.tip-box{
			font-size: 28rpx;
			color:#141311;
			line-height: 48rpx;
			margin-top:28rpx;
			padding-bottom: 24rpx;
		}
		
	}
	.it-box{
		background-color: #fff;
		border-radius: 20rpx;
		margin-top:20rpx;
		padding:22rpx 28rpx;
		
		.it{
			display: flex;line-height: 1;
			justify-content: space-between;
			padding:22rpx 0;
			position: relative;
			&:nth-child(1){
				border-bottom: 1rpx solid #EDEDED;
				margin-bottom: 10rpx;
				padding-bottom: 32rpx;
				.msg{
					font-size: 32rpx;
					font-weight: bold;
					
				}
			}
			.msg{
				font-size: 30rpx;
			}
			.val{
				font-size: 28rpx;
				color:#9A9A9A;
			}
			
		}
	}
	
	.btn-box{
		background-color: #fff;

		padding:16rpx 32rpx;
		padding-bottom: calc(16rpx + env(safe-area-inset-bottom) );
		.it{
			font-size: 32rpx;
			font-weight: bold;
			color:#fff;
			text-align:center;
			line-height: 92rpx;
			background: linear-gradient(to right,#FF9940,#FD2A00);
			border-radius: 80rpx;
		}
	}
	
</style>
